<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item
        v-for="(route, index) in breadcrumbItems"
        :key="index"
      >
        <!-- 判断面包屑是否有path属性，如果有则显示router-link标签 -->
        <router-link v-if="route.path" :to="route.path">
          <i :class="route.icon"></i>
          <span>{{ route.title }}</span>
        </router-link>
        <!-- 如果没有path属性则不跳转 -->
        <template v-else>
          <i :class="route.icon"></i>
          <span>{{ route.title }}</span>
        </template>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  name: "Breadcrumb",
  data(){
    return {
      breadcrumbItems: [],
    };
  },
  mounted(){
    this.getBreadcrumbItems(this.$route);
  },
  watch: {
    $route(newVal){
        this.getBreadcrumbItems(newVal);
    }
  },
  methods: {
    getBreadcrumbItems(route){
        this.breadcrumbItems = route.matched;
        this.breadcrumbItems = this.breadcrumbItems.map((item) => item.meta).splice(1);

        let nowPage = route.path;
        if(nowPage != '/home'){
            this.breadcrumbItems.unshift({
                title: "首页",
                icon: "el-icon-s-home",
                path: "/home"
            })
        }
    }
  }
};
</script>
  
<style lang="scss" scoped>
.breadcrumb-enter-active,
.breadcrumb-leave-active {
  transition: all 0.3s;
  opacity: 0;
  transform: translateX(20px);
}
</style>
  